Skip to main content

Quick Start

Install​

dxCharts is distributed via ZIP and private Nexus npm registry.

Our product is not free (except dxcharts-lite) and there's two ways how you can have an access to it:

  • via ZIP file we provided you
  • via access to our private npm registry

If you have a ZIP file, please follow this tutorial.

Setup your application​

There is a lot of ways how you can setup your application, to startup we recommend via create-react-app or npm create vite.

We highly recommend to use typescript, because dxcharts is fully typed, and it could be much easier to get into it.

Install via Nexus npm registry​

First of all you need to login to Nexus:

npm login --registry=https://repo.devexperts.com/repository/dxcharts/

If you are an employee of devexperts you can use devexperts VPN and different Nexus npm registry for a quicker access:

npm login --registry=https://nexus.in.devexperts.com/repository/npm-dx/

If you're using yarn version 3.x.x then you would need to add the following into .yarnrc.yml file

yarnPath: .yarn/releases/yarn-3.6.0.cjs

nodeLinker: node-modules

npmScopes:
	dx-private:
		npmAlwaysAuth: true
		npmAuthToken: NpmToken.[your auth token here]
	npmRegistryServer: 'https://repo.devexperts.com/repository/dxcharts/'

unsafeHttpWhitelist: - 'repo.devexperts.com'

Install dxCharts packages​

Install dxCharts packages that you need to your project via:

npm install @dx-private/dxchart5-modules
npm install @dx-private/dxstudies
npm install @dx-private/dxchart5-react
# or yarn
yarn add @dx-private/dxchart5-modules
yarn add @dx-private/dxstudies
yarn add @dx-private/dxchart5-react

Your package.json file should look something like that:

{
	"name": "your-package",
	"dependencies": {
		"@dx-private/dxchart5-modules": "5.6.1",
		"@dx-private/dxchart5-react": "^5.6.1",
		"@dx-private/dxstudies": "52.0.0"
		//...
	}
}

Install react and react-dom​

dxchart5-react has react and react-dom packages as a peerDependencies, so to make library work you need to install those packages in your project, if you don't have them.

dxchart5-react library works only with "react": "17.x.x" and "react-dom": "17.x.x" or higher

npm install --save react react-dom
# or yarn
yarn add react react-dom

Congratulations! All the preparations are complete! Now you are ready to use dxchart5-react library.

Video tutorial​

If you are more visually inclined, check out this video tutorial on how to integrate DXcharts in your React app.

How to use dxchart5-react library

If you use React please follow the guide for React based applications.

If your choice is Vue you can check the guide for Vue based applications.

If you like Angular you can check the guide for [[Quick Start - Angular|Angular based applications]].

If you prefer vanilla or another not so widely used frameworks you'll find useful Vanilla guide.